<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS高级常见技巧</title>
  <style>

  </style>
</head>

<body>
  <h1>设置input 的placeholder的字体样式</h1>
  <input type="text" placeholder="请设置用户名">
  <style>
    /* 设置 placeholder 样式 */
    input::-webkit-input-placeholder {    /* Chrome/Opera/Safari */
      color: red;
    }
    input::-moz-placeholder { /* Firefox 19+ */
      color: red;
    }
    input:-ms-input-placeholder { /* IE 10+ */
      color: red;
    }
    input:-moz-placeholder { /* Firefox 18- */
      color: red;
    }

    /* 设置聚焦时的样式 */
    input:focus {
      background-color: red;
    }

    /* 去掉默认边框 */
    input{
      border: none;
      outline: none;
    }
  </style>


  <h1>相邻兄弟选择器之常用场景</h1>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
    <li>6</li>
  </ul>
  <style>
    ul{
      width: 500px;
      margin: auto;
      list-style: none;
      padding:0;
      border:1px solid red;
      text-align: center;
    }
    li{
      height: 30px;
      line-height: 30px;
      box-sizing: content-box;
    }
    li+li{
      border-top:1px solid red;
    }
  </style>

  <h1>隐藏滚动条或更改滚动条样式</h1>
  <p class="scroll-container">
    庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层。豪华的车马停在贵族公子寻欢作乐的地方，她登楼向远处望去，却看不见那通向章台的大路。春已至暮，三月的雨伴随着狂风大作，再是重门将黄昏景色掩闭，也无法留住春意。泪眼汪汪问落花可知道我的心意，落花默默不语，纷乱的，零零落落一点一点飞到秋千外。
  </p>
  <style>
    .scroll-container {
      width: 500px;
      height: 150px;
      border: 1px solid #ddd;
      padding: 15px;
      overflow: auto;
      /*必须*/
    }

    .scroll-container::-webkit-scrollbar {
      width: 8px;
      background: white;
    }

    .scroll-container::-webkit-scrollbar-corner,
    /* 滚动条角落 */
    .scroll-container::-webkit-scrollbar-thumb,
    .scroll-container::-webkit-scrollbar-track {
      /*滚动条的轨道*/
      border-radius: 4px;
    }

    .scroll-container::-webkit-scrollbar-corner,
    .scroll-container::-webkit-scrollbar-track {
      /* 滚动条轨道 */
      background-color: rgba(180, 160, 120, 0.1);
      box-shadow: inset 0 0 1px rgba(180, 160, 120, 0.5);
    }

    .scroll-container::-webkit-scrollbar-thumb {
      /* 滚动条手柄 */
      background-color: #00adb5;
    }
  </style>

  <h1>虚线框绘制技巧</h1>
  <p class="dotted-line">庭院深深，不知有多深？杨柳依依，飞扬起片片烟雾，一重重帘幕不知有多少层</p>
  <style>
    .dotted-line {
      width: 800px;
      margin: auto;
      padding: 20px;
      border: 1px dashed transparent;
      background: linear-gradient(white, white) padding-box, repeating-linear-gradient(-45deg, red 0, #ccc .25em, white 0, white .75em);
    }
  </style>

  <h1>卡券效果制作</h1>
  <p class="coupon">
    <span>200</span>优惠券
  </p>
  <style>
    .coupon {
      width: 300px;
      height: 100px;
      line-height: 100px;
      margin: 50px auto;
      text-align: center;
      position: relative;
      background:
        radial-gradient(circle at right bottom, transparent 10px, #ffffff 0) top right / 50% 51px,
        radial-gradient(circle at left bottom, transparent 10px, #ffffff 0) top left / 50% 51px,
        radial-gradient(circle at right top, transparent 10px, #ffffff 0) bottom right / 50% 51px,
        radial-gradient(circle at left top, transparent 10px, #ffffff 0) bottom left / 50% 51px;
      background-repeat: no-repeat;
      filter: drop-shadow(2px 2px 2px rgba(0, 0, 0, .2));
    }
    .coupon span {
      display: inline-block;
      vertical-align: middle;
      margin-right: 10px;
      color: red;
      font-size: 50px;
      font-weight: 400;
    }
  </style>

  <h1>表格边框合并</h1>
  <table border="1">
    <thead>
      <tr>
        <th>第一列</th>
        <th>第二列</th>
        <th>第三列</th>
        <th>第四列</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1.1</td>
        <td>1.2</td>
        <td>1.3</td>
        <td>1.4</td>
      </tr>
      <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
      </tr>
      <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
      </tr>
    </tbody>
  </table>
  <style>
    table{
      border-collapse: collapse;
    }
  </style>

</body>

</html>
